<template>
  <view class="container">
    <view class="yue rel">
      <view class="font-26 c-base flex-y-center">
        <text class="m-r-10">账户金额(元)</text>
      </view>
      <view class="font-44 text-bold c-base">{{ userInfo.balance }}</view>
      <image :src="$util.img('image/sanqi/recharge_bg.png')" mode="" class="point2"></image>
    </view>

    <view class="flex-center timeimg">
      <image :src="$util.img('image/sanqi/recharge_title.png')" mode=""></image>
    </view>

    <view class="rechargeBox">
      <view
        class="item"
        :class="recharge_index == index ? 'item_on' : ''"
        v-for="(item, index) in recharge_list"
        @click="changeItem(index)"
      >
        <view class="font-60 font-weight-6">
          {{ item.buy_price | priceFormat }}
          <text class="font-24 m-l-10">元</text>
        </view>
        <view class="text-bold" v-if="parseFloat(item.give_price) > 0">赠送 ¥{{ item.give_price | priceFormat }}</view>
      </view>
    </view>

    <!-- <view class="boxPanel flex-y-center" style="margin-bottom: 40rpx">
      <view class="font-30 text-bold m-r-20">自定义金额</view>
      <view class="ziding flex-y-center m-l-auto">
        <input
          placeholder="请输入金额"
          type="number"
          placeholder-class="placeholders"
          class="inputs"
          v-model="number"
        />
        <text class="font-22">元</text>
      </view>
    </view> -->

    <view class="boxPanel m-b-20 rel">
      <view class="ge"></view>
      <view class="font-30 text-bold">充值说明</view>
      <view class="c-78">
        {{ explain }}
      </view>
    </view>

    <view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
      <view class="submit" @click="submit">立即充值</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        balance: 0,
      },
      recharge_index: 0,
      recharge_list: [],
      money: 0,
      number: "", //自定义金额输入框的值
      explain: "", //充值说明
      isSubmit: false,
    };
  },
  filters: {
    priceFormat(price) {
      if (price.indexOf(".") != -1) {
        return price.split(".")[0];
      } else {
        return price;
      }
    },
  },
  onLoad() {
    if (uni.getStorageSync("userInfo")) {
      this.userInfo = uni.getStorageSync("userInfo");
    }
    this.getInfo();
    this.getIntroduction();
  },
  methods: {
    changeItem(index) {
      this.recharge_index = index;
    },
    getInfo() {
      this.$api.sendRequest({
        url: "/memberrecharge/api/memberrecharge/page",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.recharge_list = res.data.list;
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    getIntroduction() {
      this.$api.sendRequest({
        url: "/memberrecharge/api/memberrecharge/explain",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            this.explain = res.data.explain;
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
    submit() {
      // 如果number不为空，检测金额是否符合要求，不符合则提示错误信息。
      // if(this.number) {
      //   if(parseFloat(this.number) < 10 || parseFloat(this.number) > 10000) {
      //     this.$util.showToast({title: '充值金额必须在10-10000元之间'})
      //     return false;
      //   }
      // }

      // 增加加载中提交动画
      uni.showLoading({
        title: "充值中...",
      });

      if (this.isSubmit) return;
      this.isSubmit = true;

      if (this.number !== "") {
        this.$api.sendRequest({
          url: "/memberrecharge/api/ordercreate/create",
          data: {
            recharge_id: 0,
            face_value: this.number,
          },
          success: (res) => {
            uni.hideLoading();
            if (res.data && res.code == 0) {
              this.getPayInfo(res.data);
            } else {
              this.isSubmit = false;
              this.$util.showToast({
                title: res.message,
              });
            }
          },
        });
      } else {
        this.$api.sendRequest({
          url: "/memberrecharge/api/ordercreate/create",
          data: {
            recharge_id: this.recharge_list[this.recharge_index].recharge_id,
          },
          success: (res) => {
            uni.hideLoading();
            if (res.data && res.code == 0) {
              this.getPayInfo(res.data);
            } else {
              this.isSubmit = false;
              this.$util.showToast({
                title: res.message,
              });
            }
          },
        });
      }
    },
    getPayInfo(out_trade_no) {
      this.$api.sendRequest({
        url: "/api/pay/pay",
        data: {
          out_trade_no,
          pay_type: "wechatpay",
          is_matched: 0,
        },
        success: (res) => {
          if (res.code >= 0 && res.data) {
            var payData = res.data.data;
            this.goPay(payData);
          } else {
            this.isSubmit = false;
            this.$util.showToast({
              title: "未获取到支付信息！",
            });
          }
        },
      });
    },
    goPay(payData) {
      var that = this;
      // 微信支付
      uni.requestPayment({
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success(res) {
          uni.hideLoading();
          that.$util.showToast({ title: "充值成功" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        },
        fail(res) {
          uni.hideLoading();
          that.$util.showToast({ title: "充值失败" });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.yue {
  margin: 24rpx;
  padding: 40rpx;
  background: $color-title2;
  border-radius: 20rpx;
  box-sizing: border-box;
  .point2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 266rpx;
    height: 247rpx;
  }
}

.timeimg {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30rpx 0;
  image {
    width: 272rpx;
    height: 42rpx;
  }
}

.rechargeBox {
  display: flex;
  flex-wrap: wrap;
  margin: 24rpx 24rpx 0;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 210rpx;
    height: 250rpx;
    background: #fff;
    border-radius: $border-radius;
    margin-right: 28rpx;
    margin-bottom: 30rpx;
    box-sizing: border-box;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
  .item_on {
    border: 1px solid $color-title2;
    view {
      color: $color-title2 !important;
    }
  }
}

.ge {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 35rpx;
  width: 8rpx;
  height: 28rpx;
  border-radius: 0 20rpx 20rpx 0;
  background: $color-title2;
}
</style>
